<template>
  <div class="searchBox">
    <!-- 搜索框 -->
    <form class="search_header" action="/">
      <van-search @focus="isShowSearchRes=false" v-model="searchText" show-action placeholder="请输入关键字"
        background="#3296FA" @search="onSearch" @cancel="$router.go(-1)" />
    </form>
    <!-- 搜索结果组件 -->
    <searchResults v-if="isShowSearchRes" :value="searchText" />
    <!-- 搜索历史组件 -->
    <searchHistory :historyArr="historyArr" v-else-if="!searchText" @search="onSearch" />
    <!-- 搜索联想建议组件 -->
    <searchSuggestios @searchClick="onSearch" :value="searchText" v-else />

  </div>
</template>

<script>
import searchHistory from './components/search-history.vue'
import searchResults from './components/search-results.vue'
import searchSuggestios from './components/search-suggestios.vue'
import { getItem, setItem } from '@/utils/storage.js'
const HMTT_HIS = 'hhtt_histroy'
export default {
  name: 'search',
  data () {
    return {
      searchText: '',
      isShowSearchRes: false,
      historyArr: getItem(HMTT_HIS) || []
    }
  },
  methods: {
    // 搜索时间
    onSearch (val) {
      this.historyArr.unshift(val)
      this.historyArr = [...new Set(this.historyArr)]
      this.searchText = val

      // 把是否显示搜索结果列表，显示
      this.isShowSearchRes = true
    }
  },
  computed: {},
  filters: {},
  components: {
    searchHistory, searchResults, searchSuggestios
  },
  watch: {
    historyArr (val) {
      setItem(HMTT_HIS, val)
    }
  },
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
.searchBox {
  .search_header {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .van-search__action {
    color: white;
  }
}
</style>
